import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import '../../generated/json/base/json_convert_content.dart';
import '../../model/home/banner_bean.dart';
import '../../net/dio_manager.dart';
import '../../net/global_config.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> _imageUrls = [];

  @override
  void initState() {
    super.initState();
    DioManager.getInstance()?.get(GlobalConfig.bannerUrl, {}, (data) {
      setState(() {
        _imageUrls.clear();
        BannerBean? bannerBean = JsonConvert.fromJsonAsT<BannerBean>(data);
        List<BannerResult>? list = bannerBean?.result;
        list?.forEach((element) {
          String picUrl = element.pic.replaceAll("\\", "/");
          _imageUrls.add(GlobalConfig.imageBaseUrl + picUrl);
        });
      });
    }, (error) {});
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _swiperWidget(),
        SizedBox(height: 10.h),
        _titleWidget("猜你喜欢"),
        SizedBox(height: 10.h),
        _guessYouLikeWidget(),
        _titleWidget("热门推荐"),
        _hotRecommendedWidget(),
      ],
    );
  }

  ///轮播图
  Widget _swiperWidget() {
    return AspectRatio(
        aspectRatio: 2 / 1,
        child: Swiper(
          itemBuilder: (context, index) {
            return Image.network(
              _imageUrls[index],
              fit: BoxFit.fill,
            );
          },
          itemCount: _imageUrls.length,
          pagination: const SwiperPagination(
              builder: DotSwiperPaginationBuilder(
            color: Colors.black54,
            activeColor: Colors.white,
          )),
          scrollDirection: Axis.horizontal,
          autoplay: true,
          onTap: (index) {},
        ));
  }

  ///标题
  Widget _titleWidget(value) {
    return Container(
      margin: EdgeInsets.only(left: 10.w),
      padding: EdgeInsets.only(left: 10.w),
      decoration: BoxDecoration(
        border: Border(
            left: BorderSide(
          color: Colors.red,
          width: 4.w,
        )),
      ),
      child: Text(
        value,
        style: const TextStyle(
          color: Colors.black54,
        ),
      ),
    );
  }

  ///猜你喜欢
  Widget _guessYouLikeWidget() {
    return Container(
      height: 240.h,
      padding: EdgeInsets.all(10.w),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Column(
            children: [
              Container(
                width: 160.w,
                height: 160.h,
                margin: EdgeInsets.only(right: 20.w),
                child: Image.network(
                  "https://www.itying.com/images/flutter/hot${index + 1}.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              SizedBox(
                height: 60.h,
                child: Text("第$index条"),
              )
            ],
          );
        },
        itemCount: 10,
      ),
    );
  }

  ///热门推荐
  Widget _hotRecommendedWidget() {
    return Container(
      padding: const EdgeInsets.all(10),
      child: Wrap(
        runSpacing: 10,
        spacing: 10,
        children: [
          _hotRecommendedItemWidget(),
          _hotRecommendedItemWidget(),
          _hotRecommendedItemWidget(),
          _hotRecommendedItemWidget(),
        ],
      ),
    );
  }

  Widget _hotRecommendedItemWidget() {
    var itemWidth = (ScreenUtil().screenWidth - 30) / 2;
    return Container(
      width: itemWidth,
      padding: const EdgeInsets.all(5),
      decoration: BoxDecoration(
        border: Border.all(
          color: const Color.fromRGBO(233, 233, 233, 0.9),
          width: 1,
        ),
      ),
      child: Column(
        children: [
          SizedBox(
            width: double.infinity,
            child: AspectRatio(
              aspectRatio: 1 / 1,
              child: Image.network(
                "https://www.itying.com/images/flutter/list1.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20.h),
            child: const Text(
              "2022年夏季新款气质高贵洋气阔太太有女人味中长款宽松大码",
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.black54,
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20.h),
            child: Stack(
              children: const [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "¥188.00",
                    style: TextStyle(
                      color: Colors.red,
                      fontSize: 16,
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    "¥198.00",
                    style: TextStyle(
                      color: Colors.black54,
                      fontSize: 14,
                      decoration: TextDecoration.lineThrough,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
